<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/top.jsp" %>

<link rel="stylesheet" href="css/shop.css">

<style>
    .display {
        max-height: 800px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    table{
        width: 473px;
        line-height: 30px;

    }

    #MyOrdersLink{
        width: 120px;
        height: 40px;
        border-radius: 14px;
        border: none;
        background-color: antiquewhite;
        opacity: 80%;
        font-size: 22px;
        font-family: huayuan;
        color: rgb(244, 183, 103);
        position: absolute;
        top: 170px;
        left: 150px;
        padding: 5px;
        cursor: pointer;
    }

    #MyOrdersLink button{
        width: 120px;
        height: 40px;
        border-radius: 14px;
        border: none;
        background-color: antiquewhite;
        opacity: 80%;
        font-size: 22px;
        font-family: huayuan;
        color: rgb(244, 183, 103);
        display: block;
        margin: 0 auto;
        padding: 5px;
        cursor: pointer;
    }
    #MyOrdersLink button:hover{
        color: #ff7516;
    }

</style>

<div id="MyOrdersLink">
    <a href="orderList?username=${sessionScope.account.username}">
        <button><span>My Orders</span></button>
    </a>
</div>

<div class="display">

    <div id="Catalog">

        <table>
            <tr>
                <th align="center" colspan="2">Order #${sessionScope.order.orderId}
                    <fmt:formatDate value="${sessionScope.order.orderDate}"
                                    pattern="yyyy/MM/dd hh:mm:ss"/></th>
            </tr>
            <tr>
                <th colspan="2">Payment Details</th>
            </tr>
            <tr>
                <td>Card Type:</td>
                <td><c:out value="${sessionScope.order.cardType}"/></td>
            </tr>
            <tr>
                <td>Card Number:</td>
                <td><c:out value="${sessionScope.order.creditCard}"/> * Fake
                    number!
                </td>
            </tr>
            <tr>
                <td>Expiry Date (MM/YYYY):</td>
                <td><c:out value="${sessionScope.order.expiryDate}"/></td>
            </tr>
            <tr>
                <th colspan="2">Billing Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td><c:out value="${sessionScope.order.billToFirstName}"/></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td><c:out value="${sessionScope.order.billToLastName}"/></td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td><c:out value="${sessionScope.order.billAddress1}"/></td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td><c:out value="${sessionScope.order.billAddress2}"/></td>
            </tr>
            <tr>
                <td>City:</td>
                <td><c:out value="${sessionScope.order.billCity}"/></td>
            </tr>
            <tr>
                <td>State:</td>
                <td><c:out value="${sessionScope.order.billState}"/></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td><c:out value="${sessionScope.order.billZip}"/></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td><c:out value="${sessionScope.order.billCountry}"/></td>
            </tr>

        </table>
    </div>

    <div id="Catalog2"  style="max-height: 536px;min-height: 504px;overflow-y: auto;">
        <table>
            <tr>
                <th colspan="2">Shipping Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td><c:out value="${sessionScope.order.shipToFirstName}"/></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td><c:out value="${sessionScope.order.shipToLastName}"/></td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td><c:out value="${sessionScope.order.shipAddress1}"/></td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td><c:out value="${sessionScope.order.shipAddress2}"/></td>
            </tr>
            <tr>
                <td>City:</td>
                <td><c:out value="${sessionScope.order.shipCity}"/></td>
            </tr>
            <tr>
                <td>State:</td>
                <td><c:out value="${sessionScope.order.shipState}"/></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td><c:out value="${sessionScope.order.shipZip}"/></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td><c:out value="${sessionScope.order.shipCountry}"/></td>
            </tr>
            <tr>
                <td>Courier:</td>
                <td><c:out value="${sessionScope.order.courier}"/></td>
            </tr>
            <tr>
                <td colspan="2">Status: <c:out value="${sessionScope.order.status}"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <table>
                        <tr>
                            <th>Item ID</th>
                            <th>Description</th>
                            <th>Quantity</th>
                            <th>Price</th>
<%--                            <th>Total Cost</th>--%>
                        </tr>
                        <c:forEach var="lineItem" items="${sessionScope.order.lineItems}">
                            <tr>
                                <td>
                                    <a href="productForm?productId=${lineItem.item.productId}">${lineItem.item.itemId}</a>
                                </td>
                                <td>
                                    <c:if test="${lineItem.item != null}">
                                        ${lineItem.item.attribute1}
                                        ${lineItem.item.attribute2}
                                        ${lineItem.item.attribute3}
                                        ${lineItem.item.attribute4}
                                        ${lineItem.item.attribute5}
                                        ${lineItem.item.product.name}
                                    </c:if>
                                    <c:if test="${lineItem.item == null}">
                                        <i>{description unavailable}</i>
                                    </c:if>
                                </td>

                                <td>${lineItem.quantity}</td>
                                <td><fmt:formatNumber value="${lineItem.unitPrice}"
                                                      pattern="$#,##0.00"/></td>
<%--                                <td><fmt:formatNumber value="${lineItem.total}"--%>
<%--                                                      pattern="$#,##0.00"/></td>--%>
                            </tr>
                        </c:forEach>
                        <tr>
                            <th colspan="5">Total: <fmt:formatNumber
                                    value="${sessionScope.order.totalPrice}" pattern="$#,##0.00"/></th>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

    </div>
</div>
